<!--导航条组件-->
<template>
  <div id="bar">
    <!-- 导航条 -->
    <el-menu :default-active="activeIndex" router="true" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             style="height: 80px">
      <el-menu-item><el-image style="width: 70px; height: 70px" :src="this.iconUrl+'/bq-logo/logo4.jpg'">
      </el-image>
      </el-menu-item>
<!--      -->
      <el-menu-item index="/index">首页</el-menu-item>

      <el-menu-item index="/userCenter">个人中心</el-menu-item>
      <el-menu-item index="/uploadTopic">上传题目</el-menu-item>
<!--      <el-menu-item index="4" disabled><a href="https://www.ele.me" target="_blank">开发者搜索</a></el-menu-item>-->
      <!-- 搜索栏 -->
      <el-input placeholder="请输入内容" v-model="input" style="width: 800px;margin-left: 100px;margin-top: 10px">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
      <!-- 头像 -->
      <div style="width: 150px;float:right;" v-if="this.showIcon">
        <table>
          <tr>
            <td>
              <!-- 用户头像 -->
              <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :size="45" :src="this.iconUrl+this.userInfo.icon" @error="errorHandler"></el-avatar>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <router-link to="/userCenter"><i class="el-icon-user">个人中心</i></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="/userCenter/myNotice"><i class="el-icon-bell">我的消息</i></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item><i class="el-icon-switch-button" @click="signOut">退出登录</i></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </td>
            <td>
              <!-- 用户名字 -->
              <span style="font-size: 1px">{{this.userInfo.nickName}}</span>
            </td>
          </tr>
        </table>

      </div>
      <!--鼠标放上面的弹窗-->
      <!-- 登录/注册-->
      <div style="float:right;margin-right: 70px;" v-if="!showIcon">
        <el-button type="text" @click="open(true)">登录</el-button>
        |
        <el-button type="text" @click="open(false)">注册</el-button>
      </div>

    </el-menu>
    <!-- ref起的名字，用来调用子组件login中的方法 -->
    <Login ref="login"></Login>
    <Register ref="register"></Register>
  </div>
</template>

<script>
import Login from '@/components/login/Login'
import Register from "@/components/login/Register";

export default {
  name: "bar",
  components: {
    Register, //导入组件
    Login //导航条组件
  },
  data() {
    return {
      showIcon: false, //是否显示头像框
      input: '', //搜索栏输入的值
      iconUrl: this.$IconUrl, //头像地址根路径（全局变量）
      userInfo: { //用户信息
        icon: '',
        id: '',
        nickName: ''
      },
    }
  },
  methods: {
    //判断是否登录，如果登录则改变导航栏内容(显示头像)
    checkLogin() {
      this.$myAxios('/login/checkLogin', 'get', null, resp => {
        console.log(resp)
        if (resp.data.data.loginFlag) {
          //登录标记值设置为1
          this.$store.commit("IS_LOGIN", 1)
          this.showIcon = this.$store.getters.loginFlag
          this.userInfo = resp.data.data.userInfo
        }
      })
    },
    open(num) {  //登录和注册按钮触发，触发子组件中的方法
      num ? this.$refs.login.open() : this.$refs.register.open()

    },
    //由子组件register来触发，用于关闭注册页面
    close() {
      this.$refs.register.close()
    },
    //搜索按钮
    search() {
      //跳转页面到详细题目页面，将题目id传过去
      let routeData = this.$router.resolve({
        path: "/searchTopic",
        query: {
          searchText: this.input
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    //退出登录
    signOut(){
      //token置空
      this.$store.commit("SET_TOKEN",'')
      //登录标记置为0
      this.$store.commit('IS_LOGIN',0)
      this.$message({
        message: '已退出登录',
        type: 'success'
      });
      //刷新页面
      location.reload()
    },
  },
  created() {
    //检查是否登录
    this.checkLogin()
  }
}
</script>

<style scoped>

</style>